<template>
  <div :class="toTop.arrow" @click="backToTop" class="flex">
    <span></span>
  </div>
</template>

<script>
  import backToTop from '../mixins/backToTop'
  export default {
    name: 'back-to-top',
    mixins: [backToTop]
  }
</script>

<style lang="scss" module="toTop">
  .arrow{
    width: 48px;
    height: 80px;
    background: #fff;
    border: 1px solid #e4e3e3;
    box-shadow: 2px 2px 2px 0 rgba(0,0,0,.06);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    span{
      display: inline-block;
      width:28px;
      height:30px;
      background-image: url(../assets/images/arrow.png);
      background-repeat: no-repeat;
      &:hover{
        background-image: url(../assets/images/arrow-green.png);
      }
    }
  }
</style>
